<!DOCTYPE HTML>
<html> 
<head>
	<title>Disease Map</title>
	<meta name="viewport" content="user-scalable=no, width=device-width height=device-height" /> 
	<link rel="stylesheet" href="mobile/jquery.mobile-1.0.1.min.css" />
	<script type="text/javascript" src="mobile/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="mobile/jquery.mobile-1.0.1.min.js"></script>
	<link rel="stylesheet" type="text/css" href="stylesheet/main.css" />
</head>

<body>
<div data-role="page" id="mapPage" >
	<script type="text/javascript">
		var disContainer = "";
		$("#mapPage").bind('pageinit', function() {
			var dis = localStorage.getItem('disease');
			if (navigator.onLine){
				$.getJSON('/json/map?disease='+dis,function(data) {
					disContainer += '<img style="height:20em; width:20em; margin: 1em, 1em, 1em, 1em;"' 
					+'src=\'http://chart.apis.google.com/chart?cht=map&chs=400x400&chld=';
					for ( var i = 0; i < data.length; i++) {
						if(i == 0){
							disContainer += (data[i]);
						}else{
							disContainer += '|'+ data[i];
						}
					}
					disContainer += '&chco=909090|FF4040\'>';
					$("#map").replaceWith(disContainer).trigger("refresh");
				});
			}
			else{
				$("<div class='ui-loader ui-overlay-shadow ui-body-e ui-corner-all'>"+
				"<h1>An internet connection is needed for this feature.</h1></div>")
				.css({ "display": "block", "opacity": 0.96, "top": $(window).scrollTop() + 100 })
				.appendTo( $.mobile.pageContainer ).delay( 4000 ).fadeOut( 1000, function(){
					$(this).remove();
				});
			}
		});	
	</script>
		
		<div data-role="header">
			<h4>Disease Map</h4>
			<div class="ui-btn-left">
				<a href="/">
					<img src="images/3Strata_Icon.png" style="height:2em; width:2em;"/>
				</a>
			</div>
		</div>
		
		<div data-role="content" style="text-align:center;">
			<img id="map">
		</div>
		
		<div data-role="footer" data-position="fixed">
		<h4></h4>
		</div>
		
</div>
</body>
</html>